//9.关系图--echarts
/*参数data:
var data ={
    links:[
        {source: 0, target: 9 },
        {source: 1, target: 9 },
        {source: 2, target: 9 },
        {source: 3, target: 9,},
        {source: 4, target: 9,},
        {source: 5, target: 9,},
        {source: 6, target: 9,},
        {source: 7, target: 9,},
        {source: 8, target: 9,}
        // {source: 8, target: 9, lineStyle:{ normal:{ } }}
    ],

    list:[
        {id: 0, category: 1, name: "小明", symbolSize: 30, draggable: "true"},
        {id: 1, category: 1, name: "小华", symbolSize: 30, draggable: "true"},
        {id: 2, category: 1, name: "小杰", symbolSize: 30, draggable: "true"},
        {id: 3, category: 1, name: "小婷", symbolSize: 30, draggable: "true"},
        {id: 4, category: 1, name: "小妍", symbolSize: 30, draggable: "true"},
        {id: 5, category: 1, name: "小飞", symbolSize: 30, draggable: "true"},
        {id: 6, category: 1, name: "小明", symbolSize: 30, draggable: "true"},
        {id: 7, category: 1, name: "小华", symbolSize: 30, draggable: "true"},
        {id: 8, category: 1, name: "小杰", symbolSize: 30, draggable: "true"},
        {id: 9, category: 0, name: "张三", symbolSize: 40, draggable: "true" ,symbol : 'rect', color:'red'}
    ]
}
*/

var MD09 = {
  f1:12*KO,
  f2:16*KO,
  f3:14*KO,
  W:0,
  H:0,
  obj:{ on:function(){}},
  md:null,
  init:function(el,data){
    if(el){
      this.W = el.offsetWidth;
      this.H = el.offsetHeight;
    }
    if(this.md){
      this.md.setOption({
        series: [{ 
            data: data.list,
            links: data.links,
        }]
      })
      return this.obj;
    }else{
      this.myecharts(el,data)
      return this.md;
    }
  },
  myecharts: function(el,data) {  
    // 指定图表的配置项和数据
    var option = {
        // tooltip: {
        //     textStyle:{
        //       fontSize:this.f2
        //     },
        //     formatter:'<span style="color:#FFED27;">{b}</span>',
        //     // padding:[5*KO,10*KO]
        // },
        // backgroundColor: '#FFFFFF',
        // animationDuration: 0,
        // animationEasingUpdate: 'quinticInOut',
        series: [{
            // name: '知识图谱',
            type: 'graph',
            layout: 'force',
            force: {
                repulsion: 160*KO,
                gravity: 0.1,
                edgeLength: 80*KO,
                layoutAnimation: true,
            },
            data: data.list,
            links: data.links,
            categories:[ 
                {
                    name : '父节点',
                    // itemStyle: {
                    //   color: '#40FF9D'
                    // }
                }, 
                {
                    name : '层级二',
                    
                }
            ],
            roam: true,
            label: {
                normal: {
                    show: true,
                    position: 'bottom',
                    formatter: '{b}',
                    fontSize: this.f1,
                    fontStyle: '600',
                    color:'yellow',
                    padding:[-25*KO,0,0,0]
                }
            },
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 1*KO,
                    curveness: 0,
                    // color:'green'
                }
            }
        }]
    };
    // 基于准备好的dom，初始化echarts实例
    this.md = echarts.init(el);
    // 使用刚指定的配置项和数据显示图表。
    this.md.setOption(option);
  }
}


















